<template>
  <div class="menu-demo">
    <a-row class="grid-demo" align="center">
      <a-col :span="21">
        <a-menu
          @menu-item-click="doMenuChange"
          mode="horizontal"
          :selected-keys="selectedKey"
        >
          <a-menu-item
            key="0"
            :style="{ padding: 0, marginRight: '38px' }"
            disabled
          >
            <div class="logoBox" @click="$router.push({ path: '/' })">
              <img
                style="float: left"
                src="../assets/Logo_TV_2015.svg.png"
                width="80px"
              />
              <div class="title">岭 做题</div>
            </div>
          </a-menu-item>
          <a-menu-item v-for="route in showMenu" :key="route.path"
            >{{ route.name }}
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col :span="3">
        <div>{{ store.state.user?.loginUser?.userName }}</div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
import { computed, reactive, ref } from "vue";
import store from "../store";

const router = useRouter();
const selectedKey = ref(["/"]);

const showMenu = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.showInMenu === false) {
      return item.meta.showInMenu;
    }
    return true;
  });
});

// setTimeout(() => {
//   store.dispatch("user/updateUser", {
//     userName: "岭",
//     userRole: ACCESS_ENUM.ADMIN,
//   });
// }, 3000);

/**
 * 刷新后保持原来的菜单选中
 */
router.afterEach((to, from) => {
  selectedKey.value = [to.path];
});

/**
 * 切换菜单
 * @param key
 */
const doMenuChange = (key: string) => {
  router.push({
    path: key,
  });
};
</script>

<style scoped>
.logoBox {
  width: 140px;
}

.title {
  float: left;
  width: 30px;
  font-size: 22px;
  margin-left: 30px;
  color: #444;
}
</style>
